import { useEffect, useState } from "react";
// 所有hooks函数都是以use开头
function App() {
    // 1. componentDidMount
    // 2. componentDidUpdate
    // 3. componentWillUnMount

    const [count, setCount] = useState(0);
    const [random, setRandom] = useState(0);
    // 第五种用法 -> 监听某个值
    // 第一个参数传函数并且写上返回函数，第二个参数传依赖项
    // 第一个参数函数得到最新依赖项值
    // 返回函数得到上一次依赖项的值
    // useEffect(() => {
    //     console.log("第一个参数函数中的count", count); // 依赖项最新值
    //     return () => {
    //         console.log("return函数中的count", count); // 上一次依赖项的值
    //     };
    // }, [count]);

    // 第六种用法 -> componentDidUpdate
    // 第一个参数传函数并且写上返回函数，第二个参数不传
    // 第一个参数传函数相当于componentDidUpdate，返回函数得到的是上一次状态的值
    useEffect(() => {
        console.log("第一个参数函数中的count", count); // 依赖项最新值
        console.log("第一个参数函数中的random", random);
        return () => {
            console.log("return函数中的count", count); // 上一次依赖项的值
            console.log("return函数中的random", random);
        };
    });

    return (
        <div>
            <p>count: {count}</p>
            <p>random: {random}</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    setRandom(Math.random());
                }}>
                生成随机数
            </button>
        </div>
    );
}

export default App;
